<template>
    <div>
        <heads></heads>
    <div class="padding-rl10">
        <div class="from-box">
            <div class="title"> 忘记密码</div>
            <x-input  placeholder="请输入手机号码" class="weui-vcode"  v-model="mobile" :show-clear="false">
                <x-button slot="right" type="primary"  @click.native="sendVerCode" style="width: 110px;font-size:16px;"  :class="{bg_gray:bg_gray}">
                    <span v-show="show">获取验证码</span>
                    <span v-show="!show" class="count">{{count}} s</span>
                </x-button>
            </x-input>
            <x-input placeholder="请输入验证码" type="text" v-model="code">
            </x-input>
            <x-input  placeholder="请输入密码" type="password" v-model="password">
            </x-input>
            <br/>
            <x-button type="primary" @click.native="forgetPassword">确认</x-button>
            <div class="link">
                <router-link to="/login" class="left" >用户登录</router-link>
                <router-link to="/register" class="right">注册账号</router-link>
            </div>
        </div>
    </div>
        <toast v-model="showPositionValue"  :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
    </div>
</template>

<script>
    import {XInput, XButton, Divider,Toast} from 'vux'
    import heads from  '../header';
    export default {
        name: "forget-password",
        components: {
            XInput,
            XButton,
            heads,
            Toast
        },
        data() {
            return {
                mobile: null,
                password: null,
                code:null,
                showPositionValue:false,
                position:'middle',
                message:null,
                type:'success',
                show: true,
                count: '',
                timer: null,
                bg_gray:false
            }
        },
        methods:{
            forgetPassword(){
                var _this=this;

                this.$axios.post(this.$axios.defaults.baseURL+'resetPassword',{
                    mobile:_this.mobile,
                    password:_this.password,
                    code:_this.code
                }).then(function (res) {
                    _this.message=res.data.msg;
                    _this.showPositionValue=true;
                    if(res.data.state==false){
                        _this.type='warn'
                    }else{
                        _this.type='success';
                        _this.$router.push({path:'login'});
                    }


                }).catch(function (err) {
                    console.log(err)
                })

            },
            sendVerCode(){

                if (!this.timer) {


                    var _this = this;
                    this.$axios.post(this.$axios.defaults.baseURL + 'sendSmsCode', {
                        mobile:_this.mobile,
                        type:2
                    }).then(function (res) {
                        _this.message = res.data.msg;
                        _this.showPositionValue = true;
                        if (res.data.state == false) {
                            _this.type = 'warn'
                        } else {
                            _this.type = 'success';
                            _this.count = 60;
                            _this.show = false;
                            _this.bg_gray=true;
                            _this.timer = setInterval(() => {
                                if (_this.count > 0 && _this.count <= 60) {
                                    _this.count--;

                                } else {
                                    _this.show = true;
                                    clearInterval(this.timer);
                                    _this.timer = null;
                                    _this.bg_gray=false;
                                }
                            }, 1000)
                        }


                        console.log(res.data)
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm.less";
    .bg_gray{
        background: #bbbbbb;
    }
</style>